<template>
  <common-search-wrap @search="search" @reset="searchReset">
    <el-form ref="formRef" :inline="true" :model="formData">
      <el-form-item label="选择日期：" prop="day">
        <el-date-picker
          v-model="formData.day"
          type="date"
          placeholder="请选择日期"
          style="width: 100%"
          :clearable="false"
        />
      </el-form-item>
      <el-form-item label="书名：" prop="bookName" v-if="showName">
        <el-input clearable v-model="formData.bookName" placeholder="请输入书名" />
      </el-form-item>
    </el-form>
  </common-search-wrap>
</template>

<script setup>
import commonSearchWrap from "@/components/commonSearchWrap.vue";
import { reactive, onMounted } from "vue";
import useForm from '@/hooks/useForm'
import { formateTime, todayDate } from '@/utils/time'
const props = defineProps({
  params: {
    type: Object,
    default: () => ({})
  },
  showName: {
      type: Boolean,
      default: true
  }
})
const emits = defineEmits(['submit', 'initParams'])
/** 搜索的方法 */
const handleSearch = () => {
  const params = { ...formData }
  if (formData.day) { params.day = formateTime(formData.day, 'YYYY-MM-DD')}
  emits('submit', params)
}
const { formRef, search, reset } = useForm(handleSearch)
const formData = reactive({
  day: props.params.day || todayDate,
  // bookName: props.params.bookName || "",
});
emits('initParams', formData)
const searchReset = () => {
  reset()
  handleSearch()
}
// onMounted(() => handleSearch())
</script>